<template>
  <div class="container">
    <!-- <p class="title">
      会议室预约<span>端</span>
    </p> -->
    <card style="width: 580px;max-width: 100%;margin: 2em auto;padding: 2em 0;">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm" @validate="changeStatus">
        <img src="../../assets/icons/迅慧达.png" alt="logo" class="logo">
        <el-form-item prop="id">
          <img src="../../assets/icons/用户名图标.png" alt="icon" class="icon">
          <el-input v-model="loginForm.id" :class="inputBorder1" placeholder="请输入工号/邮箱/手机号" />
        </el-form-item>
        <el-form-item prop="password">
          <img src="../../assets/icons/密码图标.png" alt="icon" class="icon">
          <el-input v-model="loginForm.password" :class="inputBorder2" placeholder="请输入密码" type="password" @keyup.enter.native="handleLogin" />
        </el-form-item>
        <el-form-item prop="remember" class="thirdFItem">
          <el-checkbox v-model="loginForm.remember" class="left">
            记住我
          </el-checkbox>
          <router-link to="forget" class="right" style="color:#606266;font-weight:500;">
            忘记密码？
          </router-link>
        </el-form-item>
        <el-form-item style="margin-bottom: 10px;">
          <router-link to="/register">
            <el-button type="primary" class="left">
              注册
            </el-button>
          </router-link>
          <el-button type="primary" class="right" @click.native.prevent="handleLogin">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card'

export default {
  components: { Card },
  data() {
    return {
      inputBorder1: 'el-input__default',
      inputBorder2: 'el-input__default',
      loginForm: {
        id: 'u005',
        password: '123456',
        remember: false
      },
      loginRules: {
        id: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (this.loginForm.remember) {
            this.$store.dispatch('LoginRemember', this.loginForm).then(() => {
              this.$router.push({ path: '/' })
            })
          } else {
            this.$store.dispatch('Login', this.loginForm).then(() => {
              this.$router.push({ path: '/' })
            })
          }
        } else {
          this.$notify({
            title: '登录失败',
            message: '工号或密码错误',
            type: 'error',
            duration: 3000
          })
          return false
        }
      })
    },
    changeStatus(prop, res) {
      switch (prop) {
        case 'id':
          this.inputBorder1 = 'el-input__default'
          res ? '' : this.inputBorder1 = 'el-input__error'
          break
        case 'password':
          this.inputBorder2 = 'el-input__default'
          res ? '' : this.inputBorder2 = 'el-input__error'
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background: url('../../assets/背景.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loginForm {
  width: 70%;
  margin: 0 auto;
}

.title {
  font-size: 4em;
  text-align: center;
  letter-spacing: .5em;
  font-weight: 400;
}

.title span{
  letter-spacing: 0;
}

.logo {
  width: 250px;
}

.logo + .el-form-item {
  margin-top: 20px;
}

.el-input__default {
  border: 2px solid #EF8458;
  border-radius: 4px;
}

.el-input__error {
  border: 2px solid #f56c6c;
  border-radius: 4px;
}

.el-input >>> .el-input__inner {
  height: 41px;
  border-color: #fff;
}

.el-input__default >>> .el-input__inner:focus {
  border-color: #EF8458;
}

.el-form-item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 30px;
  height: 45px;
}

.el-form-item >>> .el-form-item__content {
  width: 100%;
  padding-left: 45px;
}

.thirdFItem {
  height: 20px;
  margin-top: -20px;
  margin-bottom: 20px;
}

.icon {
  position: absolute;
  top:0;
  left:0px;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
  font-size: 14px;
}

.el-button {
  width: 40%;
}

.loginBtnFItem {
  margin-bottom: 10px;
}

.loginBtnFItem >>> .el-form-item__content {
  padding-left: 0;
}

.loginBtn {
  width: 100%;
  height: 50px;
}

</style>
